const path = require('path');

// 导入在内存中生成 HTML 页面的插件
// 只要是插件，都一定要放到 plugins 节点中去
// 这个插件的两个作用：
// 1. 自动在内存中根据指定页面生成一个内存的页面
// 2. 自动把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),  // 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关配置
        path: path.join(__dirname, 'dist'),  // 指定打包好的文件，输出到哪个目录中
        filename: 'bundle.js' // 这是指定输出的文件名称
    },
    plugins: [
        new htmlWebpackPlugin({  // 创建一个在内存中生成 HTML 页面的插件
            template: path.join(__dirname, './src/index.html'),  // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html'  //  指定生成的页面的名称
        }),
        new VueLoaderPlugin() //
    ],
    module: {  // 这个节点用于配置所有第三方模块加载器
        rules: [ // 这是所有第三方模块的匹配规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']}, // 配置处理 .css 文件的第三方 loader 规则
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=21,777&name=[hash:8]-[name].[ext]'}, // 处理图片路径的 loader
            {test: /\.(ttf|otf|woff|woff2|eot|svg)$/, use: 'url-loader'}, // 处理字体路径的 loader
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},  //配置 Babel 来转换 ES 高级语法
            {test: /\.vue$/, use: 'vue-loader'}  // 处理 .vue 文件的 loader
        ]
    }
};

// 当在控制台出入 webpack 后，发生了什么？
// 1. 首先 webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack 就会去项目的根目录中，查找一个叫做 webpack.config.js 的配置文件
// 3. 当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
// 4. 当 webpack 拿到配置对象后，就拿到了配置对象中，指定的 入口 和 出口，然后进行打包构建；

